<template>
  <!-- 精美视频 -->
  <view>
    <view class="shipin_tab_title">
      <view class="shipin_title_box">
        <view class="tutke_inner">
          <uni-segmented-control
            :current="current"
            :values="items.map(v => v.title)"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#d4237a"
          ></uni-segmented-control>
        </view>
        <view class="shipin_icon iconfont iconsearch"></view>
      </view>
    </view>
    <!-- 头部标题 -->
    <!-- 2个组件页面 -->
    <view class="shipin_body">
        <!-- 给组件传值 -->
      <videoMain v-if="current < 4" :urlobj="{url:items[current].url,params:items[current].params}"></videoMain>
      <videoFenlei v-else></videoFenlei>
    </view>
    <!-- 4个组件页面结束 -->
  </view>
</template>
<script>
import videoMain from "./video-main";
import videoFenlei from "./video-fenlei";
/* 引入分段器组件 */
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
  /* 挂载组件 */
  components: {
    uniSegmentedControl,
    videoMain,
    videoFenlei
  },
  data() {
    return {
      /* 分段器数据 */
      /* 4个页面的样式都一样的。所以直接用一个组件完成就好了 */
      items: [
        {
          title: "推荐",
          url: "http://157.122.54.189:9088/videoimg/v1/videowp/featured",
          params: { limit: 30, skip: 0, order: "hot" }
        },
        {
          title: "热门",
          url:
            "http://157.122.54.189:9088/videoimg/v1/videowp/category/59b25abbe7bce76bc834198a",
          params: { limit: 30, skip: 0, order: "new" }
        },
        {
          title: "最新",
          url: "http://157.122.54.189:9088/videoimg/v1/videowp/videowp",
          params: { limit: 30, skip: 0, order: "new" }
        },
        {
          title: "专辑",
          url: "http://157.122.54.189:9088/videoimg/v1/videowp/videowp",
          params: { limit: 30, skip: 0, order: "hot" }
        },
        {
          title: "分类",
          url: "http://157.122.54.189:9088/videoimg/v1/videowp/category"
        }
      ],
      /*   { title: 推荐 },
        { title: 分类 },
        { title: 最新 },
        { title: 专辑 } */

      current: 0
    };
  },

  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    }
  },
  computed: {}
};
</script>
<style lang="less" scoped>
.shipin_tab_title {
  position: relative;
  .tutke_inner {
    width: 60%;
    margin: 0 auto;
  }
  .shipin_icon {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }
}
</style>